<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{padding:0; margin:0}
#box1{width:400px; height:200px; background:red; position:relative;}
#box2{width:400px; height:200px; background:green; position:relative;}
#box3{width:400px; height:200px; background:orange; position:relative;}
#box4{width:400px; height:200px; background:purple; position:relative;}
div{margin-top:200px;}
#box1 h2{position:absolute; top:100px; left:50%; opacity:0;}
#box2 h2{position:absolute; top:50px; left:100%; opacity:0;}
#box3 h2{position:absolute; top:50px; left:0; opacity:0;}
#box4 h2{position:absolute; top:10px; left:50%; opacity:0;}
</style>
<script src="jquery-1.11.0.js"></script>
<script>
$(function(){
	$(window).scroll(function(){
		if($(window).scrollTop()>0){
			$('#box1 h2').animate({top:'30px',opacity:1},500)
			}
			//$(window).height()代表窗口的高度 div离窗口的高度offset().top减去窗口的高度再加上div的高度，这样只要滚动自己的高度就可以实现文字出现
		if($(window).scrollTop()>=$("#box2").offset().top-$(window).height()+$('#box2').height()){
			$("#box2 h2").animate({"opacity":1,"left":10},500)
		}
		if($(window).scrollTop()>=$("#box3").offset().top-$(window).height()+$('#box3').height()){
			$("#box3 h2").animate({"opacity":1,"left":100},500)
		}
		if($(window).scrollTop()>=$("#box4").offset().top-$(window).height()+$('#box4').height()){
			$("#box4 h2").animate({"opacity":1,"top":100},500)
		}	
		})
	})
</script>
</head>

<body>
<div id="box1"><h2>这是我的第一个效果（向上）</h2></div>
<div id="box2"><h2>这是我的第二个效果（向左）</h2></div>
<div id="box3"><h2>这是我的第三个效果（向右）</h2></div>
<div id="box4"><h2>这是我的第四个效果（向下）</h2></div>
</body>
</html>
